<template>
  <div class="page-container">
    <!--工具栏-->
    <div class="toolbar">
      <el-form :inline="true" :model="filters" :size="size" ref="filters">
        <el-row class="search-input">
          <el-form-item prop="afterSaleNo" label="售后编号：">
            <el-input v-model="filters.afterSaleNo" placeholder="售后编号"></el-input>
          </el-form-item>
          <el-form-item prop="orderNo" label="订单编号：">
            <el-input v-model="filters.orderNo" placeholder="订单编号"></el-input>
          </el-form-item>
        </el-row>
        <el-row class="search-button">
          <el-form-item>
            <kt-button icon="fa fa-search" :label="$t('action.search')" type="primary" @click="findPage(null)"/>
          </el-form-item>
          <el-form-item>
            <kt-button icon="fa fa-refresh" :label="$t('action.reset')" type="primary" @click="resetForm('filters')"/>
          </el-form-item>
        </el-row>
      </el-form>
    </div>

    <!--表格内容栏-->
    <div style="width: 100%">
      <cy-table height="350"
                :highlightCurrentRow="true"
                :content="pageResult"
                :totalSize="totalSize"
                :showOperation="false"
                :showSelection="false"
                :columns="filterColumns"
                :showBatchDelete="false"
                @findPage="findPage"
                ref="CyTable">
      </cy-table>
    </div>
  </div>
</template>

<script>
import KtButton from "@/views/Core/KtButton";
import CyTable from "@/views/Core/ProductTable";

export default {
	components: {
		CyTable,
		KtButton
	},

	data() {
		return {
			size: 'small',
			filters: {
				afterSaleNo: '',
				orderNo: ''
			},
			columns: [
				{prop: 'afterSaleNo', label: '售后编号', minWidth: 120},
				{prop: 'orderNo', label: '订单编号', minWidth: 120},
				{prop: 'goodsName', label: '商品名称', minWidth: 200},
				{prop: 'goodsNum', label: '商品数量', minWidth: 120},
				{prop: 'applyName', label: '申请人姓名', minWidth: 120},
				{prop: 'applyPhone', label: '申请人电话', minWidth: 120},
				{prop: 'logisticsNo', label: '物流编号', minWidth: 120},
				{prop: 'logisticsCompanyName', label: '物流公司', minWidth: 120}
			],
			filterColumns: [],
			pageRequest: {pageNum: 1, pageSize: 10},
			pageResult: [],
			totalSize: 0
		}
	},

	methods: {
		// 获取分页数据
		findPage: function(params) {
			let this_ = this
			if (params == undefined || params == null) {
				params = {
					pageNum: this_.pageRequest.pageNum,
					pageSize: this_.pageRequest.pageSize
				}
			}
			if (this_.filters == undefined || this_.filters == null) {
				this_.filters = {}
			}
			this_.filters.start = params.pageNum
			this_.filters.limit = params.pageSize
			this.utils.request.queryOrderReturnGoodRecord(this_.filters, function(res) {
				if (res.data.rows == null) {
					res.data.rows = []
				}
				this_.pageResult = res.data.rows
				this_.totalSize = Number(res.data.total)
			})
		},
		resetForm() {
			this.filters = {afterSaleNo: '', orderNo: ''}
			this.findPage()
		},

		// 处理表格列过滤显示
		displayFilterColumnsDialog: function() {
			this.$refs.tableColumnFilterDialog.setDialogVisible(true)
		},
		// 处理表格列过滤显示
		handleFilterColumns: function(data) {
			this.filterColumns = data.filterColumns
			this.$refs.tableColumnFilterDialog.setDialogVisible(false)
		},
		// 处理表格列过滤显示
		initColumns: function() {
			let temp = []
			$.each(this.columns, function(key, val) {
				temp.push(val)
			})
			this.filterColumns = temp
		}
	},

	mounted() {
		this.initColumns()
	}
};
</script>

<style lang='scss' scoped>
  .page-container {
    width: 100%;
    height: 100%;
  }

  .pd20 {
    padding-bottom: 20px
  }
</style>
